<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>axios</title>
		<script src="js/vue.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/echarts.min.js"></script>
	</head>
	<style>
		* {
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}

		body {
			background-color: whitesmoke;
		}

		ul {
			list-style-type: none;
			display: flex;
			flex-wrap: wrap;
		}

		li {
			width: calc(25% - 20px);
			margin: 10px;
			overflow: hidden;
		}

		img {
			display: block;
			margin-bottom: 5px;
			width: 100%;
			aspect-ratio: 1 / 1;
			object-fit: cover;
			transition: transform 0.3s ease;
			transform-origin: center center;
		}

		img:hover {
			transform: scale(1.1);
		}
	</style>
	<body>
		<div id='app'>
			<ul>
				<li v-for="item in list">
					<div>
						<img width="100%" :src="'//images.weserv.nl/?url='+item.image.medium" alt="">
					</div>
					<p>{{item.name}}</p>
				</li>
			</ul>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						list: []
					}
				},
				created() {
					this.getData()

				},
				methods: {
					getData() {
						//请求百度首页
						axios.get('https://www.skypixel.com/api/v2/tags')
							.then(res => {
								//请求成功
								console.log('请求成功')
								console.log(res)
								this.list = res.data.data.items
							})
							.catch(err => {
								//请求失败
								console.log('请求失败' + err)
							})
							.finally(() => {
								console.log('请求完成')
							})
					},
				}
			}).mount('#app')
		</script>
	</body>

</html>
